<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">充值</span>
    </div>
    <div class="money">
      <p class="tit">提现金额</p>
      <van-field v-model="money" autofocus />
      <p class="m-list" v-if="show">
        <span
          v-for="i in moneyList"
          :class="{ active: i == money }"
          @click="choose(i)"
          :key="i"
        >
          {{ i }}
        </span>
      </p>
    </div>
    <div class="choose" v-if="show">
      <van-cell title="单元格" is-link @click="jump">
        <span slot="title">银行卡支付</span>
        <img slot="icon" class="icon" src="../../assets/images/yl.png" />
      </van-cell>
      <van-cell title="单元格" is-link @click="jump">
        <span slot="title">微信支付</span>
        <img slot="icon" class="icon" src="../../assets/images/wx.png" />
      </van-cell>
      <van-cell title="单元格" is-link @click="jump">
        <span slot="title">支付宝支付</span>
        <img slot="icon" class="icon" src="../../assets/images/zfb.png" />
      </van-cell>
    </div>
    <div class="big-btn" @click="handleNext">
      {{ show ? "选择支付方式后，点击下一步" : "下一步" }}
    </div>

    <!-- 所有银行 -->
    <all-bank v-if="showAllBank" @close="closeAllBank" />
    <show-pay :show="showPay" @close="closePop" @pay="handlePay" />
    <v-pay :show="showPwd" />
  </div>
</template>

<script>
import allBank from "./components/AllBank";
import showPay from "./components/ShowPay";
import vPay from "./components/Pay";
export default {
  data() {
    return {
      money: null,
      moneyList: [100, 1000, 10000],
      showAllBank: false,
      showPay: false,
      show: true,
      showPwd: false
    };
  },
  components: {
    allBank,
    showPay,
    vPay
  },
  methods: {
    choose(m) {
      this.money = m;
    },
    jump() {
      if (!this.money) return this.$toast.fail("请输入充值的金额");
      this.showAllBank = true;
    },
    closeAllBank() {
      this.showAllBank = false;
      this.show = false;
    },
    handleNext() {
      if (this.show) return false;
      console.log("next");
      this.showPay = true;
    },
    closePop() {
      this.showPay = false;
    },
    handlePay() {
      this.showPay = false;
      this.showPwd = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.money {
  margin: 0;
  padding: 20px 15px;
}
</style>
